<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 466px;
				height: 700px;
				margin: 170px auto;
				display: flex;
				flex-direction: column;
			}
			p{
				font-size: 25px;
				text-align: center;
				margin-bottom: 50px;
			}
			#zh{
				width:462px ;
				height:50px ;
				margin-bottom: 20px;
				border-radius: 4px;
				border: 2px solid #ccc;
			}
			#mi{
				width:462px ;
				height:50px ;
				border-radius: 4px;
				border: 2px solid #ccc ;
			}
			.scroll {
				margin-bottom: 30px;
				width: 466px;
				height: 50px;
				background: #ccc;
				position: relative;
				margin-top: 45px;
				border-radius: 4px;
			}
			
			.bar {
				width: 50px;
				height: 50px;
				background: #fff;
				position: absolute;
				top: px;
				left: 0;
				cursor: pointer;
				border: 1px solid #ccc;
				border-radius: 4px;
			}
			#qj{
				font-size: 25px;
				color: #ccc;
				text-align: center;
				line-height: 0px;
			}
			
			.mask {
				position: absolute;
				left: 0;
				top: 0;
				background: green;
				width: 0;
				height:50px;
			}
			#dl{
				width: 466px;
				height: 50px;
				background: red;
				border: 2px solid #ccc;
				border-radius: 4px;
				margin-top: -30px;
				font-size: 20px;
				font-weight: 600;
				cursor: pointer;
				color: #fff;
			}
			#pz{
				text-align: center;
				font-size: 16px;
				color: #666;
				margin-top: -30px;
			}
			#tk{
				margin-top: -40px;
			}
			#tk a{
				text-decoration: none;
				font-size: 16px;
				color: blue;
			}
			#tk span{
				font-size: 16px;
				color: #666;
			}
			#tixing{
				font-size: 16px;
				color: #999;
				margin-top: -30px;
				margin-left: -130px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p>注册</p>
			<input type="text" name="" id="zh" value="" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;手机&nbsp;&nbsp;/&nbsp;&nbsp;邮箱&nbsp;&nbsp;/&nbsp;&nbsp;用户名"/><br/>
			<p id="tixing">创建账户后,你将不能更改账户绑定的商城</p>
			<input type="password" name="" id="mi" value="" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;密码"/>
			<div class="scroll" id="scroll">
				<div class="bar" id="bar">
					<p id="qj">&gt;&gt;</p>
				</div>
				<div class="mask" id="mask"></div>
			</div>
			<p></p>
			<p id="pz">注册OnePlus,即表示你同意OnePlus的</p>
			<p id="tk"><a href="">使用条款</a><span>和</span><a href="">隐私政策</a></p>
			<input type="button" name="" id="dl" value="创建账号" />
			
		</div>
		<script src="../js/jquery-1.11.3.min.js"></script>
		<script>
			var scroll = document.getElementById('scroll');
			var bar = document.getElementById('bar');
			var mask = document.getElementById('mask');
			var ptxt = document.getElementsByTagName('p')[0];
			var barleft = 0;
			bar.onmousedown = function(event) {
				var event = event || window.event;
				var leftVal = event.clientX - this.offsetLeft;
				var that = this;
		
				document.onmousemove = function(event) {
					var event = event || window.event;
					barleft = event.clientX - leftVal;
					if (barleft < 0)
						barleft = 0;
					else if (barleft > scroll.offsetWidth - bar.offsetWidth)
						barleft = scroll.offsetWidth - bar.offsetWidth;
					mask.style.width = barleft + 'px';
					that.style.left = barleft + "px";
					window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
				}
		
			}
			document.onmouseup = function() {
				document.onmousemove = null;
			}
		</script>

		<script>
			$('#dl').on('click',function(){
				let username = $('#zh').val()
				let password = $('#mi').val()

				$.ajax({
					url:"http://jx.xuzhixiang.top/ap/api/reg.php",
					type:"get",
					data:{
						username,password
					}
				}).then(res=>{
					console.log(res);
					alert(res.msg)
					if(res.code === 1){
						location.href = 'login.html'
					}
				})
			})
			
		</script>
	</body>
</html>
